<template>
	<view
		class="header-box"
		:style="{ height: winInfo.height + 'px', paddingTop: winInfo.top + 'px', justifyContent: winInfo.uniPlatform == 'mp-weixin' ? 'flex-start' : 'space-between' }"
	>
		<view class="left-box">
			<tui-icon name="arrowleft" color="#fff" size="25" @tap="goBack" bold="true"></tui-icon>
		</view>
		<view class="right-box">
			<tui-icon name="search" color="#fff" size="25" @tap="goBack" bold="true"></tui-icon>
		</view>
	</view>
	<!-- <uv-parse
		style="width: 100vw; position: fixed"
		:content="
			'<video src=\'' +
			Microi.FileServer +
			DataInfo.Shipin +
			'\' class=\'videos\' style=\'height: ' +
			(popupShow ? '30vh' : '100vh') +
			'\' controls=\'false\' show-play-btn=\'false\' show-progress=\'false\' loop=\'true\' autoplay=\'true\'></video>'
		"
		:lazyLoad="true"
	></uv-parse> -->
	<iframe class="videos" :style="{ height: popupShow ? '30vh' : '100vh' }" ref="myiframe" :src="Microi.FileServer + DataInfo.Shipin" frameborder="0"></iframe>
	<!-- <video :src="Microi.FileServer + DataInfo.Shipin" class="videos" :style="{ height: popupShow ? '30vh' : '100vh' }" controls="false" :autoplay="true"></video> -->
	<!-- 右边工具栏 -->
	<view class="right-BtnContainer">
		<view class="btn-box" @click="WZdianzan">
			<image src="/static/images/company/hongxin.png" class="zhuanfa-btn" v-if="DataInfo.myZan" mode="widthFix"></image>
			<image src="/static/images/find/whiteAixin.png" class="zhuanfa-btn" v-else mode="widthFix"></image>
			<view>{{ computeNum(DataInfo.DianzanCount) || '点赞' }}</view>
		</view>
		<view class="btn-box" @tap="popupShow = true">
			<image src="/static/images/find/pinglun.png" class="zhuanfa-btn" mode="widthFix"></image>
			<view>{{ DataInfo.PinglunCount || '评论' }}</view>
		</view>
		<view class="btn-box" @tap="SCdianzan">
			<image v-if="DataInfo.shouCang" src="/static/images/company/yiSC.png" class="zhuanfa-btn" mode="widthFix"></image>
			<image v-else src="/static/images/find/shoucangWhite.png" class="zhuanfa-btn" mode="widthFix"></image>
			<view class="bottom-boxinfo">{{ DataInfo.ShoucangCount || '收藏' }}</view>
		</view>
		<view class="btn-box" @tap="caozuoShow">
			<image src="/static/images/company/zhuanfa.png" mode="widthFix" class="zhuanfa-btn" v-if="!Islogin || CurrentUser.Id != DataInfo.YonghuID"></image>
			<image src="/static/images/find/set.png" mode="widthFix" class="zhuanfa-btn" v-else></image>
			<view class="bottom-boxinfo">{{ !Islogin || CurrentUser.Id != DataInfo.YonghuID ? '转发' : '编辑' }}</view>
		</view>
	</view>
	<!-- 底部用户栏目 -->
	<view class="Wenzhang_info" :style="{ paddingBotton: winInfo.safeAreaInsets.bottom + 'rpx' }">
		<view class="user-info">
			<image @tap="userDetail" :src="DataInfo.Avatar || '/static/images/my/noAvatar.svg'" class="avatar-img" mode="aspectFill"></image>
			<view @tap="userDetail">{{ DataInfo.Name }}</view>
			<view @tap="guanzhuUser" v-if="(Islogin && CurrentUser.Id != DataInfo.UserId) || !Islogin" :class="DataInfo.isGuanzhu ? 'yiguanzhu' : 'guanzhu'">
				{{ DataInfo.isGuanzhu ? '已关注' : '关注' }}
			</view>
		</view>
		<view class="wenzhang-Detail">
			<view>{{ DataInfo.Biaoti }}</view>
			<hbxw-text-folding color="#fff" v-if="DataInfo.BijiNR" :rows="2" :fontSize="24" :btnStyle="{ backgroundColor: 'transparent', color: '#fff' }">
				{{ DataInfo.BijiNR }}
			</hbxw-text-folding>
			<view class="BQ-container" v-if="DataInfo.Biaoqian">
				<view class="BQ-box" v-for="(item, index) in JSON.parse(DataInfo.Biaoqian)" @tap="searchHuati(item)">{{ item.name ? '#' + item.name : item }}</view>
			</view>
		</view>
		<view class="input-box" @tap="pinglunShow" style="border-radius: 0">
			<input type="text" disabled="true" placeholder="说点什么......" placeholder-class="input-holder" />
			<image src="/static/images/my/@1.png" style="width: 25px" mode="widthFix"></image>
			<tui-icon name="pic" color="#999" size="25"></tui-icon>
		</view>
	</view>
	<tui-bottom-popup :zIndex="1002" :maskZIndex="1001" :show="popupShow" @close="popupShow = false">
		<view class="pinglun-container">
			<view class="pinglun-count">共{{ DataInfo.PinglunCount }}条评论</view>
			<view v-if="Islogin" style="height: 100%">
				<view class="pinglun-input">
					<image class="pinglun-avatar" :src="CurrentUser.Avatar || '/static/images/my/noAvatar.svg'" mode="aspectFill"></image>
					<view class="input-box" style="background: #f4f5f6" @tap="pinglunShow">
						<input type="text" disabled="true" placeholder="说点什么......" placeholder-class="input-holder" />
						<image src="/static/images/my/@1.png" style="width: 25px" mode="widthFix"></image>
						<tui-icon name="pic" color="#999" size="25"></tui-icon>
					</view>
				</view>
				<scroll-view scroll-y="true" style="height: 90%" v-if="pinglunList.Data.length" @scrolltolower="getMorePinglun">
					<view style="height: 100%">
						<view v-for="(item, index) in pinglunList.Data" v-if="pinglunList.Data.length">
							<view
								class="pinglun-box"
								style="display: flex"
								:style="{ backgroundColor: isGray && options.PinglunID == item.Id && options.Type == 'look' ? '#f4f5f6' : '#fff' }"
							>
								<view class="pinglunInfo-left-box">
									<image
										:src="item.Avatar || '/static/images/company/niming.png'"
										@tap="userDetail(item.UserId)"
										class="pinglun-Avatar"
										mode="aspectFill"
									></image>
									<view>
										<view class="zuozhe-Name" @tap="userDetail(item.UserId)">
											<view>{{ item.Name || '暂无昵称' }}</view>
											<view v-if="item.UserId == DataInfo.UserId" class="zuozhe-bq">作者</view>
										</view>
										<!-- 评论内容 -->
										<view style="line-height: 50rpx">
											<span v-if="(item.ZuozheID != item.ZuozheID || item.PinglunSXXID) && item.ZuoZheName">回复&nbsp;</span>
											<span
												style="color: #999"
												@tap="userDetail(item.ZuozheID)"
												v-if="(item.ZuozheID != item.ZuozheID || item.PinglunSXXID) && item.ZuoZheName"
											>
												{{ item.ZuoZheName }}:
											</span>
											<template v-for="(part, i) in splitCommentContent(item.PinglunNR)">
												<text v-if="part.type === 'text'">{{ part.content }}</text>
												<text v-else class="at-user" @tap="handleAtUserClick(part.atIndex, index)">{{ part.content }}</text>
											</template>
											<view v-if="item.PinglunTP && JSON.parse(item.PinglunTP).length" class="pinglun-imageList">
												<image
													v-for="(pic, ide) in JSON.parse(item.PinglunTP)"
													:src="pic.url"
													@tap="previewImg(JSON.parse(item.PinglunTP), ide)"
													mode="aspectFill"
												></image>
											</view>
											<view class="wenzhang-time">{{ computeCreateTime(item.CreateTime) }}</view>
										</view>
									</view>
								</view>
								<view class="wenzhang-right-box">
									<view class="buttom-box" @tap="PinglunZan(index, item.Id, item.myDZ, item.UserId)">
										<image :src="item.myDZ ? '/static/images/company/hongxin.png' : '/static/images/company/xin.png'" mode="widthFix"></image>
										<view :style="{ color: item.myDZ ? '#FA1B0A' : '#666666' }">{{ item.dianzanCount || '点赞' }}</view>
									</view>
									<view class="buttom-box" @tap="reBackPinglun(index)">
										<image src="/static/images/company/pinglun.png" mode=""></image>
										<view>{{ item.pinglunCount || '评论' }}</view>
									</view>
								</view>
							</view>
							<view class="zPinglun-container">
								<view
									class="pinglun-box"
									style="border: 0"
									v-for="(val, j) in item.Pinglun"
									:style="{ backgroundColor: isGray && options.ZipingLID == val.Id && options.Type == 'lookSon' ? '#f4f5f6' : '#fff' }"
								>
									<view class="pinglunInfo-left-box">
										<image
											:src="val.Avatar || '/static/images/company/niming.png'"
											@tap="userDetail(val.UserId)"
											class="pinglun-Avatar"
											mode="aspectFill"
										></image>
										<view>
											<view class="zuozhe-Name" @tap="userDetail(val.UserId)">
												<view>{{ val.Name || '暂无昵称' }}</view>
												<view v-if="val.UserId == DataInfo.UserId" class="zuozhe-bq">作者</view>
											</view>
											<!-- 评论内容 -->
											<view style="line-height: 50rpx; font-size: 26rpx">
												<span v-if="(val.ZuozheID != val.ZuozheID || val.PinglunSXXID) && val.ZuoZheName">回复&nbsp;</span>
												<span
													style="color: #999"
													@tap="userDetail(val.ZuozheID)"
													v-if="(val.ZuozheID != val.ZuozheID || val.PinglunSXXID) && val.ZuoZheName"
												>
													{{ val.ZuoZheName }}:
												</span>
												<template v-for="(part, i) in splitCommentContent(val.PinglunNR)">
													<text v-if="part.type === 'text'">{{ part.content }}</text>
													<text v-else class="at-user" @tap="handleAtUserClick(part.atIndex, index)">{{ part.content }}</text>
												</template>
												<view v-if="val.PinglunTP && JSON.parse(val.PinglunTP).length" class="pinglun-imageList">
													<image
														v-for="(pic, ide) in JSON.parse(val.PinglunTP)"
														:src="pic.url"
														@tap="previewImg(JSON.parse(val.PinglunTP), ide)"
														mode="aspectFill"
													></image>
												</view>
												<view class="wenzhang-time">{{ computeCreateTime(val.CreateTime) }}</view>
											</view>
										</view>
									</view>
									<view class="wenzhang-right-box">
										<view class="buttom-box" @tap="PinglunZan(index, item.Id, val.myDZ, val.UserId, j, val.Id)">
											<image :src="val.myDZ ? '/static/images/company/hongxin.png' : '/static/images/company/xin.png'" mode="widthFix"></image>
											<view :style="{ color: val.myDZ ? '#FA1B0A' : '#666666' }">{{ val.dianzanCount || '点赞' }}</view>
										</view>
										<view class="buttom-box" @tap="reBackPinglun(j)">
											<image src="/static/images/company/pinglun.png" mode=""></image>
											<view>{{ val.pinglunCount || '评论' }}</view>
										</view>
									</view>
								</view>
								<view
									class="Zhankai-pinglun"
									v-if="!item.noData && item.pinglunCount - 1 > 0 && item.Pinglun.length < item.pinglunCount"
									@tap="getPinglun(item.Id, index)"
								>
									----{{ item.page == 1 ? `展开${item.pinglunCount - 1}条回复` : '展开更多回复' }}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>

				<view v-else class="no-Data">
					<image src="/static/images/my/noPinglun.png" mode="widthFix"></image>
					<view>这是一片荒草地</view>
				</view>
			</view>
			<view v-else class="no-Data" @tap="Microi.CheckLogin()">
				<image src="/static/images/my/noPinglun.png" mode="widthFix"></image>
				<view>登录查看评论~</view>
			</view>
		</view>
	</tui-bottom-popup>
	<!-- 输入框 -->
	<tui-modal :show="pinglunModalShow" padding="0" @cancel="pinglunModalShow = false" custom>
		<view class="popup-container">
			<scroll-view scroll-x="true" v-if="aiteUser && guanzhuList.Data.length">
				<view class="user-list">
					<view class="user-box" @tap="chooseUser(item.YonghuID, item.Name)" v-for="item in guanzhuList.Data">
						<view class="image-container">
							<image :src="item.Avatar" mode="aspectFill" class="user-avatar"></image>
							<view class="user-choose-overlay" v-if="Pinglun.aiteList.findIndex((val) => val == item.YonghuID) != -1"></view>
							<view class="check-info" v-if="Pinglun.aiteList.findIndex((val) => val == item.YonghuID) != -1">
								<tui-icon name="check" color="#fff" size="20" bold="true"></tui-icon>
							</view>
						</view>

						<view class="user-Name">{{ item.Name }}</view>
					</view>
				</view>
			</scroll-view>
			<textarea cursor-spacing="300" @input="changePinglunNR" placeholder="说点什么..." :focus="inputFocus" :value="Pinglun.PinglunNR" class="comment-textarea"></textarea>
			<view class="popup-footer">
				<view class="btn-container">
					<view class="btn-box" style="flex-direction: row">
						<image src="/static/images/my/@1.png" @tap="aiteShow" style="width: 25px" mode="widthFix"></image>
						<tui-icon name="pic" color="#999" size="25" @tap="chooseImage"></tui-icon>
					</view>
					<view class="submit-btn" @tap="submitComment">发布</view>
				</view>

				<scroll-view scroll-x="true">
					<view class="image-preview" v-if="Pinglun.PinglunTP.length > 0" :style="{ width: (Pinglun.PinglunTP.length + 1) * 200 + 'rpx' }">
						<view class="preview-item" v-for="(item, index) in Pinglun.PinglunTP" @tap="previewImg(Pinglun.PinglunTP, index)">
							<image :src="Microi.FileServer + item.Path" mode="aspectFill"></image>
							<view class="delete-btn" @tap.stop="deleteImage(index)">
								<tui-icon name="shut" color="#666" size="15"></tui-icon>
							</view>
						</view>
						<view class="preview-item" v-if="Pinglun.PinglunTP.length < 10" @tap="chooseImage">
							<tui-icon name="plus" color="#999" size="25"></tui-icon>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</tui-modal>

	<tui-bottom-popup :zIndex="1002" backgroundColor="#F5F5F5" :maskZIndex="1001" :show="zhuanfaShow" @close="zhuanfaShow = false">
		<view class="popup-header">
			<view>分享至</view>
			<tui-icon name="shut" @tap="zhuanfaShow = false" color="#3e3e3e" size="20" class="popup-close"></tui-icon>
		</view>
		<view class="popup-line">
			<scroll-view scroll-x="true" style="white-space: nowrap" @scrolltoupper="getFriendList">
				<view style="display: inline-flex">
					<view class="friend-box" v-for="(item, index) in friendsList.Data" @tap="shareUser(item, index)">
						<view class="friend-avatar">
							<image :src="item.Avatar || '/static/images/my/noAvatar.svg'" mode="aspectFill"></image>
							<view class="select-box" v-if="shareUserInfo.userList && shareUserInfo.userList.length">
								<tui-icon name="circle" color="#999" size="20" v-if="!item.Selected"></tui-icon>
								<tui-icon name="circle-fill" color="#0a66c2" size="20" v-else></tui-icon>
							</view>
						</view>
						<view>{{ item.NAME }}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="popup-line" v-if="!shareUserInfo.userList.length">
			<!-- <view class="share-box">
				<image src="/static/images/find/sixin.svg" class="share-img" mode="aspectFill"></image>
				<view>私信好友</view>
			</view> -->
			<button v-if="winInfo.uniPlatform == 'mp-weixin'" open-type="share" style="margin: 0; padding: 0; line-height: normal">
				<view class="share-box">
					<image src="/static/images/find/wechat.svg" class="share-img" mode="aspectFill"></image>
					<view>微信好友</view>
				</view>
			</button>
			<view v-else class="share-box" @tap="shareWechat">
				<image src="/static/images/find/wechat.svg" class="share-img" mode="aspectFill"></image>
				<view>微信好友</view>
			</view>
		</view>
		<view class="popup-line" style="border: 0" v-if="!shareUserInfo.userList.length && DataInfo.UserId == CurrentUser.Id">
			<view class="share-box" @tap="editWenzhang">
				<view class="share-img">
					<image src="/static/images/my/editInfo.png" style="width: 30rpx" mode="widthFix"></image>
				</view>

				<view>编辑</view>
			</view>
			<view class="share-box" @tap="deleteWenzhang">
				<view class="share-img">
					<image src="/static/images/common/delete.png" style="width: 30rpx" mode="widthFix"></image>
				</view>
				<view>删除</view>
			</view>
		</view>
		<view v-if="shareUserInfo.userList.length" class="popup-line share-NR" style="border: 0">
			<textarea v-model="shareUserInfo.pinglunNR" placeholder-class="input-placeholder" placeholder="和朋友说点什么吧......"></textarea>
			<view v-if="DataInfo.Shipin" style="position: relative">
				<view class="play-btn">
					<tui-icon name="turningright" color="#fff" size="20"></tui-icon>
				</view>
				<image v-if="DataInfo.Fengmian" :src="Microi.FileServer + DataInfo.Fengmian" mode="aspectFill"></image>
				<video v-else :controls="false" :show-center-play-btn="false" class="biji-image" :src="Microi.FileServer + DataInfo.Shipin"></video>
			</view>
		</view>
		<view v-if="shareUserInfo.userList.length" class="fasong-btn" @tap="shareMessage">发送</view>
	</tui-bottom-popup>
</template>

<script>
import { uploadFile } from '@/utils/tool.js';
import uParse from '@/components/uv-parse/uv-parse.vue';
export default {
	components: {
		uParse
	},
	data() {
		return {
			Islogin: this.Microi.IsLogin(),
			CurrentUser: this.Microi.GetCurrentUser(),
			winInfo: {
				height: 64, //header高度
				top: 26, //标题图标距离顶部距离
				scrollH: 0, //滚动总高度
				safeAreaInsets: {
					bottom: 34
				}
			},
			startTime: 0,
			isGray: false,
			options: {},
			DataInfo: {},
			pinglunList: {
				Data: [],
				noData: false,
				page: 1
			},
			currentImgIndex: 0,
			Pinglun: {
				PinglunID: '',
				PinglunXXID: '',
				PinglunSXXID: '',
				PinglunNR: '',
				PinglunTP: [],
				ZuozheID: '',
				aiteList: []
			},
			guanzhuList: {
				page: 1,
				Data: [],
				noData: false,
				searchKey: ''
			},
			popupShow: false,
			CurrentPLindex: null,
			CurrentPLindex2: null,
			pinglunModalShow: false,
			inputFocus: false,
			isDisabled: false,
			aiteUser: false,
			zhuanfaShow: false,
			shareUserInfo: {
				userList: [],
				pinglunNR: ''
			},
			friendsList: {
				page: 1,
				Data: [],
				noData: false
			},
			onloadCode: '',
			poster: ''
		};
	},
	mounted() {
		let obj = {};
		// #ifdef MP-WEIXIN
		obj = wx.getMenuButtonBoundingClientRect();
		// #endif
		// #ifdef MP-BAIDU
		obj = swan.getMenuButtonBoundingClientRect();
		// #endif
		// #ifdef MP-ALIPAY
		my.hideAddToDesktopMenu();
		// #endif

		setTimeout(() => {
			uni.getSystemInfo({
				success: (res) => {
					console.log(res, 'res');
					this.winInfo = res;
					this.winInfo.width = obj.left || res.windowWidth;
					this.winInfo.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44;
					this.winInfo.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
					this.winInfo.scrollH = res.windowWidth;
				}
			});
		}, 0);
	},

	onLoad(options) {
		this.options = options;
		if (options.ShangjiID) uni.setStorageSync('ShangjiID', options.ShangjiID);
		this.getTuwenDetail();
		if (options.Type) {
			this.popupShow = true;
		}
	},
	onShow() {
		this.startTime = new Date();
	},
	onHide() {
		if (this.Islogin) {
			// 获取当前页面栈
			const pages = getCurrentPages();
			// 获取当前页面的对象
			const currentPage = pages[pages.length - 1];
			// 获取当前页面的路径
			const route = currentPage.route;
			// 获取当前页面的参数
			const options = currentPage.options;
			this.Microi.ApiEngine.Run('Add_liulanLog', {
				YemianCS: options,
				YemianDZ: route,
				LiulanSJC: new Date().getTime() - this.startTime.getTime()
			});
		}
	},
	onUnload() {
		if (this.Islogin) {
			// 获取当前页面栈
			const pages = getCurrentPages();
			// 获取当前页面的对象
			const currentPage = pages[pages.length - 1];
			// 获取当前页面的路径
			const route = currentPage.route;
			// 获取当前页面的参数
			const options = currentPage.options;
			this.Microi.ApiEngine.Run('Add_liulanLog', {
				YemianCS: options,
				YemianDZ: route,
				LiulanSJC: new Date().getTime() - this.startTime.getTime()
			});
		}
	},
	methods: {
		async getTuwenDetail() {
			var self = this;
			var res = await self.Microi.ApiEngine.Run('get_TuwenDetail', {
				Id: self.options.Id,
				YonghuID: self.CurrentUser?.Id
			});

			if (res.Code != 1) {
				this.Microi.Tips(res.Msg, false);
				setTimeout(function () {
					self.goBack();
				}, 2000);
			} else {
				self.DataInfo = res.Data;
				this.poster = this.Microi.FileServer + res.Data.Shipin + '?x-oss-process=video/snapshot,t_0,f_jpg';
				this.onloadCode = `<video style="width: 100%;height: 100%" poster="${this.poster}" controls="controls" src="${this.Microi.FileServer + res.Data.Shipin}"></video>`;
				self.getPinglunList();
			}
		},
		async deleteWenzhang() {
			var self = this;
			uni.showModal({
				title: '提示',
				content: '确定删除吗',
				success: async function (res) {
					if (res.confirm) {
						var res = await self.Microi.ApiEngine.Run('delete_wenzhang', {
							Id: self.options.Id,
							Biaoming: 'diy_Biji'
						});
						if (res.Code == 1) {
							uni.reLaunch({
								url: '/pages/tabbar/find/find'
							});
						} else {
							self.Microi.Tips('删除失败', false);
						}
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		shareWechat() {
			var self = this;
			// 获取当前页面栈
			const pages = getCurrentPages();
			// 获取当前页面的对象
			const currentPage = pages[pages.length - 1];
			// 获取当前页面的路径
			var route = currentPage.route + '?Id=' + this.options.Id;
			if (this.Islogin) {
				route = route + '&ShangjiID=' + this.CurrentUser.Id;
			}
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 5,
				title: this.DataInfo.Biaoti,
				imageUrl: this.DataInfo.Fengmian ? this.Microi.FileServer + this.DataInfo.Fengmian : 'https://minio.nbweixin.cn/public/baiying/img/20250506/byingLOGO_3x.png',
				miniProgram: {
					id: 'gh_b4436e0c5cb3',
					path: route,
					type: 0,
					webUrl: this.Microi.Weburl
				},
				success: function (res) {
					console.log('success:' + JSON.stringify(res));
				},
				fail: function (err) {
					console.log('fail:' + JSON.stringify(err));
				}
			});
		},
		shareUser(item, j) {
			if (item.Selected) {
				var index = this.shareUserInfo.userList.findIndex((val) => (val.YonghuID = item.YonghuID));
				if (index != -1) {
					this.shareUserInfo.userList.splice(index, 1);
				}
			} else {
				this.shareUserInfo.userList.unshift(item);
			}
			this.friendsList.Data[j].Selected = !this.friendsList.Data[j].Selected;
		},
		editWenzhang() {
			uni.navigateTo({
				url: '/pages/my/huodong/HDfabu?Id=' + this.options.Id + '&currentTab=2'
			});
		},
		caozuoShow() {
			if (this.Islogin) {
				if (!this.friendsList.noData && !this.friendsList.Data.length) this.getFriendList();
				this.zhuanfaShow = true;
			} else {
				this.Microi.Tips('请先登录', false);
			}
		},
		async shareMessage() {
			var self = this;
			if (!self.shareUserInfo.userList.length) {
				this.Microi.Tips('请选择分享好友', false);
				return;
			}
			var res = await self.Microi.ApiEngine.Run('get_ShareUser', {
				userList: self.shareUserInfo.userList,
				PinglunNR: self.shareUserInfo.pinglunNR || self.DataInfo.Biaoti,
				Biaoming: 'diy_Biji',
				Id: this.options.Id
			});
			if (res.Code == 1) {
				this.Microi.Tips('分享成功', false);
				this.shareUserInfo = {
					userList: [],
					pinglunNR: ''
				};
				this.zhuanfaShow = false;
				return;
			} else {
				this.Microi.Tips(res.Msg, false);
			}
		},
		async getFriendList() {
			var self = this;
			if (this.friendsList.noData) {
				this.Microi.Tips('暂无更多好友', false);
				return;
			}
			var res = await self.Microi.ApiEngine.Run('get_myFriendList', {
				YonghuID: self.CurrentUser.Id,
				page: this.friendsList.page
			});
			if (!res.Data.length) {
				this.friendsList.noData = true;
				return;
			}
			if (this.friendsList.page == 1) {
				this.friendsList.Data = res.Data;
			} else {
				this.friendsList.Data.push(...res.Data);
			}
			this.friendsList.page++;
		},
		searchHuati(item) {
			var name = item.name ? item.name : item;
			uni.navigateTo({
				url: '/pages/my/search/searchList?info=' + name
			});
		},
		/*
		1、Id评论的Id
		2、index 评论的项
		*/
		async getPinglun(Id, index) {
			var self = this;
			if (self.pinglunList.Data[index] && self.pinglunList.Data[index].noData) return;
			uni.showLoading({
				title: '加载中～',
				mask: true
			});
			var page = self.pinglunList.Data[index].page || 1;
			var PinglunID = self.pinglunList.Data[index].Pinglun[0].Id || '';
			var res = await self.Microi.ApiEngine.Run('get_PinglunList', {
				Id: Id,
				page: page,
				YonghuID: self.CurrentUser?.Id,
				PinglunID: PinglunID,
				Type: 1
			});

			uni.hideLoading();
			if (res.Data.length == 0) {
				self.pinglunList.Data[index].noData = true;
			}

			if (res.Data[0].Id == PinglunID) res.Data.splice(0, 1);
			self.pinglunList.Data[index].Pinglun.push(...res.Data);
			self.pinglunList.Data[index].page = page + 1;
		},
		computeNum(num) {
			num = num * 1;
			if (num > 10000) {
				return num / 10000 + 'w+';
			} else if (num > 1000) {
				return num / 1000 + 'k+';
			} else {
				return num;
			}
		},
		getMorePinglun() {
			if (this.pinglunList.noData) {
				this.Microi.Tips('暂无更多评论', false);
				return;
			} else {
				this.getPinglunList();
			}
		},
		async getPinglunList() {
			var self = this;
			if (self.pinglunList.noData) return;
			var res = await self.Microi.ApiEngine.Run('get_PinglunList', {
				Id: self.options.Id,
				YonghuID: self.CurrentUser?.Id,
				Type: 0,
				page: self.pinglunList.page,
				PinglunID: self.options.PinglunID || '',
				ZipingLID: self.options.ZipingLID || ''
			});
			if (self.pinglunList.page == 1 && (self.options.PinglunID || self.options.ZipingLID)) {
				self.isGray = true;
				setTimeout(() => {
					self.isGray = false;
				}, 2000);
			}
			if (!res.Data.length) self.pinglunList.noData = true;
			self.pinglunList.Data.push(...res.Data);
			self.pinglunList.page++;
		},

		pinglunShow() {
			this.pinglunModalShow = true;
			this.$nextTick(() => {
				this.inputFocus = true; // 自动聚焦
			});
		},
		closePinglun() {
			this.inputFocus = false;
			setTimeout(() => {
				this.pinglunModalShow = false;
			}, 200);
		},
		chooseUser(Id, Name) {
			var index = this.Pinglun.aiteList.findIndex((item) => item === Id);
			if (index !== -1) {
				this.Pinglun.aiteList.splice(index, 1);
				const regex = new RegExp(`@${Name}\\s`);
				this.Pinglun.PinglunNR = this.Pinglun.PinglunNR.replace(regex, '');
			} else {
				this.Pinglun.aiteList.push(Id);
				if (this.Pinglun.PinglunNR.endsWith('@')) {
					// 如果最后一个字符是 @，只添加 Name
					this.Pinglun.PinglunNR += Name + ' ';
				} else {
					// 如果最后一个字符不是 @，先添加 @ 再添加 Name
					this.Pinglun.PinglunNR += '@' + Name + ' ';
				}
			}
		},
		aiteShow() {
			this.guanzhuList = {
				page: 1,
				Data: [],
				noData: false,
				searchKey: ''
			};
			this.Pinglun.PinglunNR += '@';
			this.getGuanzhuList();
			this.aiteUser = true;
		},
		async getGuanzhuList() {
			var self = this;
			if (self.guanzhuList.noData) return;
			var res = await self.Microi.ApiEngine.Run('get_myGuanzhuList', {
				YonghuID: self.CurrentUser.Id,
				page: self.guanzhuList.page,
				searchKey: self.guanzhuList.searchKey || ''
			});
			if (self.guanzhuList.page == 1 && !res.Data.length) {
				this.aiteUser = false;
				return 'noUser';
			} else if (!res.Data.length) {
				self.guanzhuList.noData = true;
				return;
			}
			self.guanzhuList.Data.push(...res.Data);
			self.guanzhuList.page++;
		},
		async WZdianzan() {
			var self = this;
			uni.showLoading({
				title: '加载中～',
				mask: true
			});
			var Type = self.DataInfo.myZan;
			var res = await self.Microi.ApiEngine.Run('user_dianzanOrsc', {
				Id: self.options.Id,
				Caozuo: '点赞',
				Leixing: '笔记',
				ZuozheID: self.DataInfo.UserId,
				Type: Type
			});
			uni.hideLoading();
			self.DataInfo.DianzanL = Type ? self.DataInfo.DianzanL - 1 : self.DataInfo.DianzanL + 1;
			self.DataInfo.myZan = Type ? 0 : 1;
			var ZanCount = this.DataInfo.DianzanL || 0;
			uni.setStorageSync('FindWenZhangZan', {
				Id: this.options.Id,
				ZanCount: ZanCount,
				myZan: this.DataInfo.myZan
			});
		},
		async SCdianzan() {
			var self = this;
			uni.showLoading({
				title: '加载中～',
				mask: true
			});
			var Type = self.DataInfo.shouCang;
			var res = await self.Microi.ApiEngine.Run('user_dianzanOrsc', {
				Id: self.options.Id,
				Caozuo: '收藏',
				Leixing: '笔记',
				ZuozheID: self.DataInfo.UserId,
				Type: Type
			});
			uni.hideLoading();
			self.DataInfo.shouCang = Type ? 0 : 1;
			self.DataInfo.ShoucangCount = Type ? self.DataInfo.ShoucangCount - 1 : self.DataInfo.ShoucangCount + 1;
		},
		async PinglunZan(index, Id, Type, ZuozheID, index2, Id2) {
			var self = this;
			var info = index2 >= 0 ? this.pinglunList.Data[index].Pinglun[index2] : this.pinglunList.Data[index];
			uni.showLoading({
				title: '加载中～',
				mask: true
			});
			var res = await self.Microi.ApiEngine.Run('user_dianzanOrsc', {
				Id: self.options.Id,
				Caozuo: '点赞',
				Leixing: '笔记',
				ZuozheID: ZuozheID,
				Type: Type,
				PinglunID: Id,
				ZipingLID: Id2
			});
			if (index2 == -1) {
				info.myDZ = Type ? 0 : 1;
				info.dianzanCount = Type ? info.dianzanCount - 1 : info.dianzanCount + 1;
			} else {
				info.myDZ = Type ? 0 : 1;
				info.dianzanCount = Type ? info.dianzanCount - 1 : info.dianzanCount + 1;
			}
			uni.hideLoading();
		},
		reBackPinglun(index, index2) {
			console.log(index, index2);
			this.CurrentPLindex = index;
			this.CurrentPLindex2 = index2;
			this.pinglunShow();
		},
		changePinglunNR(e) {
			const value = e.detail.value;
			const oldValue = this.Pinglun.PinglunNR;
			this.Pinglun.PinglunNR = value;

			// 判断是否是删除操作
			const isDelete = value.length < oldValue.length;

			// 如果是删除操作，关闭@用户列表
			if (isDelete) {
				this.aiteUser = false;
			}

			// 检查是否以@结尾且没有空格
			if (value.endsWith('@') && !isDelete && !this.aiteUser) {
				console.log('search');
				this.guanzhuList = {
					page: 1,
					Data: [],
					noData: false,
					searchKey: ''
				};
				this.getGuanzhuList();
				this.aiteUser = true;
				return;
			}

			// 检查是否删除了@和空格
			const lastChar = value[value.length - 1];
			if (lastChar === '@' && !isDelete && !this.aiteUser) {
				this.guanzhuList = {
					page: 1,
					Data: [],
					noData: false,
					searchKey: ''
				};
				this.getGuanzhuList();
				this.aiteUser = true;
				return;
			}

			// 检查最后一个@后面是否有内容需要搜索
			const lastAtIndex = value.lastIndexOf('@');
			if (lastAtIndex !== -1 && !isDelete) {
				const afterAt = value.slice(lastAtIndex + 1);
				if (!afterAt.includes(' ')) {
					// 如果有内容需要搜索
					if (afterAt.length > 0) {
						this.guanzhuList.searchKey = afterAt;
						this.guanzhuList.page = 1;
						this.guanzhuList.Data = [];
						this.guanzhuList.noData = false;
						this.getGuanzhuList();
						this.aiteUser = true;
					}
				}
			}

			// 如果删除了@和空格，需要更新aiteList
			const atUsers = value.match(/@([^@\s]+)\s/g) || [];
			const currentAiteList = atUsers
				.map((user) => {
					const name = user.slice(1, -1); // 移除@和空格
					const userObj = this.guanzhuList.Data.find((u) => u.Name === name);
					return userObj ? userObj.YonghuID : null;
				})
				.filter((id) => id !== null);

			// 更新aiteList
			this.Pinglun.aiteList = currentAiteList;
		},
		userDetail() {
			uni.navigateTo({
				url: '/pages/my/myDetail/myDetail?Id=' + this.DataInfo.YonghuID
			});
		},
		async guanzhuUser() {
			if (!this.Islogin) {
				this.Microi.Tips('请先登录', false);
				return;
			}
			this.moreBtn = false;
			var self = this;
			var res = await self.Microi.ApiEngine.Run('GuanZhu_user', {
				YonghuID: self.DataInfo.YonghuID,
				Type: self.DataInfo.isGuanzhu
			});
			if (res.Code != 1) {
				this.Microi.Tips(res.Msg, false);
			} else {
				// this.Microi.Tips(res.Msg, true);
				self.DataInfo.isGuanzhu = self.DataInfo.isGuanzhu ? 0 : 1;
			}
		},
		bannerChange(e) {
			this.currentImgIndex = e.detail.current;
		},
		previewImg(item, index) {
			var urls = [];
			item.forEach((val) => {
				urls.push(val.url);
			});
			uni.previewImage({
				urls: urls,
				current: index
			});
		},
		goBack() {
			let pages = getCurrentPages(); // 获取当前页面堆栈
			let pageCount = pages.length; // 页面堆栈中的页面数量
			// 判断是否有上级页面
			if (pageCount > 1) {
				// 如果有上级页面，则返回上级页面
				uni.navigateBack({
					delta: 1
				});
			} else {
				// 如果没有上级页面，则返回首页
				uni.switchTab({
					url: '/pages/tabbar/find/find' // 替换为你的首页路径
				});
			}
		},
		chooseImage() {
			var self = this;
			console.log(self.Pinglun.PinglunTP.length, 'self.Pinglun.PinglunTP.length');
			uni.chooseImage({
				count: 10 - self.Pinglun.PinglunTP.length, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: function (res) {
					var array = res.tempFilePaths;
					array.forEach(async (item) => {
						var res = await self.uploadImage(item);
						self.Pinglun.PinglunTP.push(res);
					});
				}
			});
		},
		computeCreateTime(CreateTime) {
			var CreateTime = new Date(CreateTime).getTime();
			var TimeNow = new Date().getTime();
			var PassTime = TimeNow - CreateTime;

			var oneMinute = 60 * 1000; // 一分钟的毫秒数
			var oneHour = 60 * oneMinute; // 一小时的毫秒数
			var oneDay = 24 * oneHour; // 一天的毫秒数
			var oneMonth = 30 * oneDay; // 大约一个月的毫秒数，这里假设一个月为30天

			if (PassTime < oneMinute) {
				return '刚刚';
			} else if (PassTime < oneHour) {
				return Math.floor(PassTime / oneMinute) + '分钟前';
			} else if (PassTime < oneDay) {
				return Math.floor(PassTime / oneHour) + '小时前';
			} else if (PassTime < oneMonth) {
				return Math.floor(PassTime / oneDay) + '天前';
			} else {
				var date = new Date(CreateTime);
				return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
			}
		},
		async submitComment() {
			var self = this;
			if (self.isDisabled) {
				self.Microi.Tips('请勿重复点击', false);
				return;
			}
			self.isDisabled = true;
			var pinglun = self.Pinglun;
			if (!pinglun.PinglunNR && !pinglun.PinglunTP.length) {
				self.Microi.Tips('有内容才能发送哦', false);
				self.isDisabled = false;
				return;
			}

			pinglun.PinglunID = self.options.Id;
			pinglun.ZuozheID = self.DataInfo.YonghuID;
			pinglun.Leixing = '笔记';
			uni.showLoading({
				title: '提交中',
				mask: true
			});
			if (self.CurrentPLindex != null && self.CurrentPLindex * 1 >= 0) {
				pinglun.PinglunXXID = self.pinglunList.Data[self.CurrentPLindex].Id;
				pinglun.ZuozheID = self.pinglunList.Data[self.CurrentPLindex].UserId;
				if (self.CurrentPLindex2 != null && self.CurrentPLindex2 * 1 >= 0) {
					pinglun.PinglunSXXID = self.pinglunList.Data[self.CurrentPLindex].Pinglun[self.CurrentPLindex2].Id;
					pinglun.ZuozheID = self.pinglunList.Data[self.CurrentPLindex].Pinglun[self.CurrentPLindex2].UserId;
				}
			}
			var res = await self.Microi.ApiEngine.Run('add_wenzhangPinglun', {
				pinglun: pinglun
			});
			uni.hideLoading();
			if (res.Code != 1) {
				this.Microi.Tips(res.Msg, false);
				return;
			}
			res.Data.Name = self.CurrentUser.Name;
			res.Data.Avatar = self.CurrentUser.Avatar;
			res.Data.ZuoZheName = self.CurrentUser.Name;
			res.Data.ZuoZheAvatar = self.CurrentUser.Avatar;
			res.Data.ZuozheID = self.CurrentUser.Id;
			self.DataInfo.PinglunCount++;
			if (self.CurrentPLindex != null && self.CurrentPLindex * 1 >= 0) {
				if (self.pinglunList.Data[self.CurrentPLindex].Pinglun) {
					self.pinglunList.Data[self.CurrentPLindex].Pinglun.push(res.Data);
				} else {
					self.pinglunList.Data[self.CurrentPLindex].Pinglun = [res.Data];
				}
			} else {
				self.pinglunList.Data.unshift(res.Data);
			}
			self.Pinglun = {
				PinglunID: '',
				PinglunXXID: '',
				PinglunSXXID: '',
				PinglunNR: '',
				PinglunTP: [],
				ZuozheID: '',
				aiteList: []
			};
			self.guanzhuList = {
				page: 1,
				Data: [],
				noData: false,
				searchKey: ''
			};
			self.pinglunModalShow = false;
			self.CurrentPLindex2 = null;
			self.CurrentPLindex = null;
			self.isDisabled = false;
		},
		// 照片上传
		SelectImage(e) {
			uni.showLoading({
				title: '上传照片中',
				mask: true
			});
			var array = e.tempFilePaths;
			array.forEach(async (item) => {
				var res = await this.uploadImage(item);
				this.Pinglun.PinglunTP.push(res);
			});
			setTimeout(function () {
				uni.hideLoading();
			}, 1000);
		},

		deleteImage(index) {
			this.Pinglun.PinglunTP.splice(index, 1);
		},
		async uploadImage(Path) {
			console.log(Path, 'Path');
			if (Path.indexOf('https://minio.nbweixin.cn/public') == -1) {
				console.log('into', Path);
				var res = await this.Microi.Upload({
					Path: '/img', // 文件路径前缀
					Limit: false, // 是否上传到私有存储桶
					Preview: true, // 是否压缩图片
					_FilePath: Path
				});
				if (res.Code == 1) {
					var obj = {
						Path: res.Data.Path,
						Name: res.Data.Name,
						Size: res.Data.Size,
						CreateTime: res.Data.CreateTime,
						Id: res.Data.Id,
						url: this.GetServerPath(res.Data.Path),
						name: res.Data.Name,
						extname: res.Data.Path.split('.')[1]
					};
					return obj;
				}
			} else {
				let endIndex = Path.indexOf('https://minio.nbweixin.cn/public');
				// code = url.substring(0,endIndex)
				var Path1 = Path.substring(0, endIndex);
				console.log(Path, 'Path');
				return Path1;
			}
		},
		GetServerPath(Path) {
			if (!Path) {
				return '';
			}
			return this.Microi.FileServer + Path;
		},
		splitCommentContent(content) {
			if (!content) return [];
			const parts = [];
			const regex = /@([^@\s]+)\s/g;
			let lastIndex = 0;
			let match;
			let atIndex = 0;

			while ((match = regex.exec(content)) !== null) {
				// 添加@之前的文本
				if (match.index > lastIndex) {
					parts.push({
						type: 'text',
						content: content.slice(lastIndex, match.index)
					});
				}
				// 添加@用户
				parts.push({
					type: 'at',
					content: match[0],
					atIndex: atIndex
				});
				atIndex++;
				lastIndex = match.index + match[0].length;
			}

			// 添加最后剩余的文本
			if (lastIndex < content.length) {
				parts.push({
					type: 'text',
					content: content.slice(lastIndex)
				});
			}

			return parts;
		},
		handleAtUserClick(atIndex, index, index1) {
			var info = index1 ? this.pinglunList.Data[index].pinglun[index1] : this.pinglunList.Data[index];
			console.log(info);
			if (info.AiteYHIDS) {
				uni.navigateTo({
					url: '/pages/my/myDetail/myDetail?Id=' + JSON.parse(info.AiteYHIDS)[atIndex]
				});
			} else {
				this.Microi.Tips('暂无该用户信息~', false);
				return;
			}
		}
	},
	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function (options) {
		var self = this;
		// 获取当前页面栈
		const pages = getCurrentPages();
		// 获取当前页面的对象
		const currentPage = pages[pages.length - 1];
		// 获取当前页面的路径
		var route = currentPage.route + '?Id=' + this.options.Id;
		if (this.Islogin) {
			route = route + '&ShangjiID=' + this.CurrentUser.Id;
		}
		return {
			title: this.DataInfo.Biaoti,
			route: route,
			imageUrl: this.Microi.FileServer + this.DataInfo.Fengmian,
			success: function (res) {
				self.Microi.ApiEngine.Run('zhuanfa_Wenzhang', {
					Biaoming: 'diy_Biji',
					Id: self.options.Id
				});
			}
		};
	},
	onShareTimeline: function () {
		var self = this;
		return {
			title: this.DataInfo.Biaoti,
			query: {
				ShangjiID: this.CurrentUser.Id
			},
			imageUrl: this.Microi.FileServer + this.DataInfo.Fengmian,
			success: function (res) {
				self.Microi.ApiEngine.Run('zhuanfa_Wenzhang', {
					Biaoming: 'diy_Biji',
					Id: self.options.Id
				});
			}
		};
	},
	onReachBottom() {
		this.getPinglunList();
	},
	onPullDownRefresh() {
		this.getTuwenDetail();
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 500);
	}
};
</script>

<style>
page {
	background-color: #000;
}
.page {
	padding: 0 0 0 0;
	color: #000;
	box-sizing: border-box;
}
.container {
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
}
.videos {
	width: 100vw !important;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}
video {
	width: 100vw !important;
	height: 100%;
}
.header-box {
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 20rpx 0;
}
.header-box .left-box {
	display: flex;
	align-items: center;
	justify-content: flex-start;

	font-family: PingFang SC, PingFang SC;
	font-size: 31rpx;
	color: #212121;
	text-align: left;
	font-style: normal;
	text-transform: none;
	white-space: nowrap;
	margin-right: 20rpx;
}
.header-box .right-box {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 23rpx;
}
.zhuanfa-btn {
	width: 34rpx;
	height: 34rpx;
}

.yiguanzhu {
	width: 102rpx;
	height: 44rpx;
	background: #999999;
	border-radius: 26rpx 26rpx 26rpx 26rpx;

	font-family: PingFang SC, PingFang SC;
	font-weight: bold;
	font-size: 24rpx;
	color: #ffffff;
	text-align: center;
	font-style: normal;
	text-transform: none;
	line-height: 44rpx;
}
.guanzhu {
	width: 76rpx;
	height: 41rpx;
	background: #0a66c2;
	border-radius: 24rpx 24rpx 24rpx 24rpx;

	font-family: PingFang SC, PingFang SC;
	font-weight: bold;
	font-size: 22rpx;
	color: #ffffff;
	text-align: center;
	line-height: 41rpx;
	font-style: normal;
	text-transform: none;
}
.header-info {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 20rpx;
}
.header-info image {
	width: 25rpx;
}
.header-btn {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 20rpx;
}
.header-btn image {
	width: 44rpx;
	height: 44rpx;
}
.hearder-container {
	padding: 20rpx 0;
	border-bottom: 2rpx solid #f4f5f6;
}

.no-Data {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin: auto;
	margin-top: 200rpx;

	font-family: Inter, Inter;
	font-weight: 400;
	font-size: 22rpx;
	color: #999999;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.no-Data image {
	width: 400rpx;
}
.tui-banner-swiper {
	width: 100%;
	margin: auto;
	height: 612rpx;
	overflow: hidden;
	transform: translateY(0);
	background-color: #f8f8f8;
}

.tui-banner-swiper image {
	width: 100%;
	height: 100%;
	display: block;
}
.dot-list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15rpx;
	margin: 20rpx 0;
}
.dot-box {
	width: 11.9rpx;
	height: 11.9rpx;
	border-radius: 50%;
}
.wenzhang-info {
	display: flex;
	align-items: left;
	justify-content: flex-start;
	flex-direction: column;
	gap: 17rpx;
	margin: 25rpx;
	margin-top: 40rpx;
	padding-bottom: 17rpx;
	border-bottom: 2rpx solid #eef0f1;
}
.wenzhang-bt {
	font-family: PingFang SC, PingFang SC;
	font-weight: 800;
	font-size: 31rpx;
	color: #212121;
	line-height: 40rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.wenzhang-nr {
	width: 587rpx;
	font-family: Inter, Inter;
	font-weight: 400;
	font-size: 24rpx;
	color: #212121;
	line-height: 31rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.wenzhang-Time {
	font-family: Inter, Inter;
	font-weight: 400;
	font-size: 20rpx;
	color: #999999;
	text-align: left;
	font-style: normal;
	text-transform: none;
	margin-top: 50rpx;
}
.pinglun-container {
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	gap: 30rpx;
	padding: 20rpx;
	box-sizing: border-box;
	height: 70vh;
}
.pinglun-count {
	font-family: Inter, Inter;
	font-size: 22rpx;
	color: #212121;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.pinglun-input {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 18rpx;
	margin-bottom: 16rpx;
}
.pinglun-avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
}
.input-box {
	width: 100%;
	height: 60rpx;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 30rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 11rpx 15rpx;
}
.input-box image {
	margin-right: 16rpx;
}
.input-box input {
	width: 90%;
}
.bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 20rpx 25rpx;
	height: 150rpx;
	background: #ffffff;
	border-top: 2rpx solid #f4f5f6;
	box-sizing: border-box;
	gap: 10rpx;
}
.input-info {
	background: #f4f5f6;
	border-radius: 14rpx 14rpx 14rpx 14rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 11rpx 18rpx;
	gap: 5rpx;
	width: 100%;
	flex: 1;
}
.input-info image {
	width: 27.21rpx;
	height: 27.21rpx;
}
.bottom-boxContaienr {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 20rpx;
}
.bottom-boxinfo {
	white-space: nowrap;
}
.bottom-box {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	font-family: PingFang SC, PingFang SC;
	font-weight: 800;
	font-size: 24rpx;
	line-height: 34rpx;
	color: #666666;
	text-align: left;
	font-style: normal;
	text-transform: none;
	gap: 2rpx;
}
.bottom-box image {
	width: 34rpx;
	height: 34rpx;
}
.input-holder {
	font-family: PingFang SC, PingFang SC;
	font-size: 22rpx;
	color: #979797;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
input {
	font-family: PingFang SC, PingFang SC;
	font-size: 22rpx;
	color: #000;
	text-align: left;
	font-style: normal;
	text-transform: none;
	width: 100%;
}
.popup-container {
	width: 100%;
	background: #fff;
	z-index: 1002;
	border-radius: 20rpx;
	padding: 20rpx;
	box-sizing: border-box;
}
.user-list {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 16rpx;
}
.user-box {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5rpx;
}
.image-container {
	position: relative;
}

.user-avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
}

.user-choose-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 80rpx;
	height: 80rpx;
	background-color: rgba(0, 0, 0, 0.3); /* 半透明白色遮罩 */
	border-radius: 50%;
}
.check-info {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #0a66c2;
	border: 2rpx solid #fff;
	width: 35rpx;
	height: 35rpx;
	border-radius: 50%;
	position: absolute;
	bottom: -1%;
	right: -10%;
}

.user-Name {
	font-family: PingFang SC, PingFang SC;
	font-size: 22rpx;
	color: #000;
	text-align: left;
	font-style: normal;
	text-transform: none;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
}
.user-list image {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
}
.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #eee;
}

.popup-title {
	font-size: 32rpx;
	font-weight: bold;
}

.popup-close {
	font-size: 40rpx;
	color: #999;
	padding: 10rpx;
}

.comment-textarea {
	width: 100%;
	height: 100rpx;
	padding: 20rpx;
	box-sizing: border-box;
	margin: 20rpx 0;
	background: #f8f8f8;
	border-radius: 10rpx;

	font-family: PingFang SC, PingFang SC;
	font-size: 28rpx;
	color: #000;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.popup-footer {
	padding-top: 20rpx;
}
.btn-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.upload-box {
	display: flex;
	align-items: center;
	gap: 10rpx;
	padding: 20rpx 0;
}

.upload-icon {
	width: 40rpx;
	height: 40rpx;
}

.image-preview {
	display: flex;
	gap: 20rpx;
	padding: 20rpx 0;
}

.preview-item {
	position: relative;
	width: 160rpx !important;
	height: 160rpx !important;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f2f2f2;
	border-radius: 16rpx;
}

.preview-item image {
	width: 150rpx;
	height: 150rpx;
	border-radius: 10rpx;
}

.delete-btn {
	position: absolute;
	top: 10rpx;
	right: 10rpx;
	width: 40rpx;
	height: 40rpx;
	background: rgba(0, 0, 0, 0.1);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.submit-btn {
	width: 100rpx;
	height: 60rpx;
	background: #0a66c2;
	line-height: 60rpx;
	color: #fff;
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.popup-mask {
	z-index: 1001;
	background-color: rgba(0, 0, 0, 0.5);
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0%;
	left: 0;
}

.paixu-box {
	display: flex;
	align-items: center;
	justify-content: flex-start;

	font-family: PingFang SC, PingFang SC;
	/* font-weight: 500; */
	font-size: 25rpx;
	color: #666666;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.paixu-box image {
	width: 25rpx;
}
.Wenzhang-box {
	width: 692rpx;
	/* height: 560rpx; */
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	border: 2rpx solid #f4f5f6;
	padding: 20rpx;
	margin: 15rpx;
	box-sizing: border-box;
	background-color: #fff;
}
.user-header {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 15rpx;

	font-family: PingFang SC, PingFang SC;
	/* font-weight: 500; */
	font-size: 24rpx;
	color: #999999;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.avatar-img {
	width: 51rpx;
	height: 51rpx;
	border-radius: 50%;
}

.user-name {
	font-family: PingFang SC, PingFang SC;
	/* font-weight: 500; */
	font-size: 32rpx;
	color: #333333;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.wenzhang-right-box {
	display: flex;
	align-items: center;
	gap: 10rpx;
	justify-content: flex-start;
}
.wenzhang-info {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 8;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
}
.wenzhang-Line-info {
	margin: 15rpx 0;

	font-family: PingFang SC, PingFang SC;
	/* font-weight: 500; */
	font-size: 28rpx;
	color: #333333;
	font-style: normal;
	text-transform: none;
}
.wenzhang-buttom {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.wenzhang-time {
	font-family: PingFang SC, PingFang SC;
	/* font-weight: 500; */
	font-size: 24rpx;
	color: #999999;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.buttom-box {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 10rpx;
	font-family: Inter, Inter;
	font-weight: 400;
	font-size: 20rpx;
	color: #666666;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.buttom-box image {
	width: 30rpx;
	height: 30rpx;
}
.zPinglun-container {
	margin: 16rpx;
	margin-bottom: 0;
	margin-left: 60rpx;
}
.Zhankai-pinglun {
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 20rpx;
	color: #999393;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.no-Data {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-size: 25rpx;
	color: #999999;
	margin: auto;
	margin-top: 200rpx;
}
.no-Data image {
	width: 200rpx;
}
.add-Pinglun {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 196rpx;
	height: 60rpx;
	background: #f4f5f6;
	border-radius: 30rpx 30rpx 30rpx 30rpx;
	gap: 12rpx;

	font-family: PingFang SC, PingFang SC;
	/* font-weight: 500; */
	font-size: 28rpx;
	color: #666666;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.add-Pinglun image {
	width: 36rpx;
	height: 36rpx;
}
.popup-container {
	padding: 20rpx;
}
.popup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.tui-input_box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
	font-size: 25rpx;
}
.tui-input_box textarea {
	background-color: #f2f2f2;
	border-radius: 16rpx;
	padding: 16rpx;
	height: 150rpx;
	width: 90%;
	box-sizing: border-box;
	margin-top: 16rpx;
}
.tui-input_box input {
	padding: 15rpx;
	border-radius: 20rpx;
	text-align: left;
}
.tui-input_title {
	width: 250rpx;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.tui-input_info {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.tui-Btn-box_refuse {
	width: 276rpx;
	height: 72rpx;
	background: #0a66c2;
	border-radius: 98rpx 98rpx 98rpx 98rpx;

	font-family: PingFang SC, PingFang SC;
	/* font-weight: 800; */
	font-size: 32rpx;
	color: #ffffff;
	text-align: center;
	font-style: normal;
	line-height: 72rpx;
	text-transform: none;
	margin: auto;
}

.pinglun-box {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 16rpx;

	font-family: PingFang SC, PingFang SC;
	/* font-weight: 500; */
	font-size: 28rpx;
	color: #333333;
	font-style: normal;
	text-transform: none;
	box-sizing: border-box;
	background-color: #fff;
}
.pinglunInfo-left-box {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 18rpx;
}
.zuozhe-Name {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10rpx;

	font-family: PingFang SC, PingFang SC;
	font-size: 27rpx;
	color: #999999;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.zuozhe-bq {
	width: 70rpx;
	height: 31rpx;
	border-radius: 26rpx 26rpx 26rpx 26rpx;
	border: 1rpx solid #0a66c2;

	font-family: PingFang SC, PingFang SC;
	font-weight: bold;
	font-size: 20rpx;
	color: #0a66c2;
	text-align: center;
	line-height: 31rpx;
	font-style: normal;
	text-transform: none;
}
.pinglun-Avatar {
	width: 51rpx;
	height: 51rpx;
	border-radius: 50%;
}
.center {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
}
.pinglun-left-box {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 15rpx;

	font-family: PingFang SC, PingFang SC;
	font-weight: 800;
	font-size: 27rpx;
	color: #999999;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.at-user {
	color: #0a66c2;
}
.pinglun-imageList {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 16rpx;
}
.pinglun-imageList image {
	width: 150rpx;
	height: 150rpx;
	border-radius: 30rpx;
}

.right-BtnContainer {
	position: fixed;
	right: 28rpx;
	bottom: 200rpx;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	gap: 45rpx;
	z-index: 999;
}
.btn-box {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	gap: 3rpx;
	margin-bottom: 20rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 800;
	font-size: 25rpx;
	color: #ffffff;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.btn-box image {
	width: 47.27rpx;
}
.Wenzhang_info {
	box-sizing: border-box;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 19rpx;
	padding-top: 30rpx;
	min-height: 230rpx;
	z-index: 990;
	/* backdrop-filter: blur(16px); */
	background: rgba(30, 30, 30, 0.3);
	-webkit-backdrop-filter: blur(16px);
}
.user-info {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 16rpx;
	padding-left: 25rpx;
	box-sizing: border-box;
	height: 39rpx;
	font-family: PingFang SC, PingFang SC;
	font-size: 28rpx;
	color: #ffffff;
	text-align: left;
	font-style: normal;
	text-transform: none;
	margin-bottom: 20rpx;
}
.wenzhang-Detail {
	width: 544rpx;
	font-family: Inter, Inter;
	font-weight: 400;
	font-size: 22rpx;
	color: #ffffff;
	line-height: 29rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
	padding-left: 25rpx;
	box-sizing: border-box;
}
.BQ-container {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 16rpx;
	margin: 16rpx 0;
}
.BQ-box {
	/* width: 148rpx; */
	white-space: nowrap;
	height: 52rpx;
	/* background: #eef0f1; */
	border-radius: 16rpx 16rpx 16rpx 16rpx;

	font-family: Roboto, Roboto;
	/* font-weight: 400; */
	line-height: 52rpx;
	box-sizing: border-box;
	font-size: 25rpx;
	color: #0a66c2;
	text-align: center;
	font-style: normal;
	text-transform: none;
}

.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16rpx;
	border-bottom: 1rpx solid #ececec;
}

.popup-title {
	font-size: 32rpx;
	font-weight: bold;
}

.popup-close {
	font-size: 40rpx;
	color: #a6a6a6;
	padding: 10rpx;
}
.popup-line {
	padding: 16rpx;
	border-bottom: 1rpx solid #ececec;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 20rpx;
}
.input-placeholder {
	font-family: PingFang SC, PingFang SC;
	font-size: 22rpx;
	color: #ccc;
	text-align: left;
}
.friend-box {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 10rpx;
	position: relative;
	font-family: PingFang SC, PingFang SC;
	font-size: 22rpx;
	color: #000;
	text-align: left;
	font-style: normal;
	margin-right: 10rpx;
}

.friend-avatar {
	width: 80rpx;
	height: 80rpx;

	position: relative;
}
.friend-avatar image {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.select-box {
	position: absolute;
	bottom: -2%;
	right: -2%;
	width: 30rpx;
	height: 30rpx;
	background-color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.share-box {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 10rpx;

	font-family: PingFang SC, PingFang SC;
	font-size: 22rpx;
	color: #a6a6a6;
	text-align: left;
	font-style: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
}
.share-img {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
}
.share-NR {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.share-NR textarea {
	height: 100rpx;
	font-size: 22rpx;
	line-height: 40rpx;
}
.bottom-bgc {
	position: absolute;
	bottom: 5%;
	right: 5%;

	width: 50rpx;
	height: 20rpx;
	background-color: #dac8e9;
}
.fasong-btn {
	width: 90%;
	margin: auto;
	height: 60rpx;
	line-height: 60rpx;
	background-color: #0a66c2;
	color: #fff;
	text-align: center;
	border-radius: 60rpx;
}
.biji-image {
	width: 100rpx;
	height: 100rpx;
	background-color: #fff;
}
.play-btn {
	position: absolute;
	top: 22rpx;
	right: 22rpx;
	width: 48rpx;
	height: 48rpx;
	border-radius: 50%;
	z-index: 990;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.1);
}
</style>
